<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>交付记录发货明细</title>
		<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<!-- 引入组件库 -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			
			.app {
				width: 780px;
				height: 512px;
			}
			
			.spanfrom {
				float: left;
				margin-left: 40px;
			}
			
			.buttomfrom {
				float: right;
				margin-right: 40px;
				margin-bottom: 40px;
			}
		</style>
	</head>

	<body>
		<el-row>
		</el-row>
		<div id="app" class="app">
			<el-form ref="form" class="demo-ruleForm" :model="form" label-width="80px" :rules="rules"  :inline="true">
				<el-row>
					<el-col>
						<span class="spanfrom">交付记录/发货明细</span>
					</el-col>
					<el-col>
						<el-button class="buttomfrom" @click="onSubmit('form')">保存</el-button>
					</el-col>
				</el-row>
				<hr style="margin-bottom: 25px;" />
				<div>
					<el-form-item label="客     户：" label-width="100px" prop="state1">
						<el-autocomplete class="inline-input" v-model="state1"
							 :fetch-suggestions="querySearch" 
							 placeholder="产品拼音头.编号 关键字" @select="handleSelect" 
							 style="margin-left:5%; width:230%;">
						</el-autocomplete>				
					</el-form-item>
				</div>
				<div>
					<el-form-item label="合同/订单号：" label-width="120px" prop="state2">
						<el-autocomplete class="inline-input" v-model="state2"
							 :fetch-suggestions="querySearch" 
							 placeholder="订单拼音头.编号 关键字" @select="handleSelect" 
							 style="margin-left:5%; width:230%;">
						</el-autocomplete>		
					</el-form-item>
				</div>
			
				<div>
					<el-form-item label="产     品：" label-width="120px" prop="state3">
						<el-autocomplete class="inline-input" v-model="state3"
							 :fetch-suggestions="querySearch" 
							 placeholder="产品拼音头.编号 关键字" @select="handleSelect" 
							 style="margin-left:5%; width:230%;">
						</el-autocomplete>		
					</el-form-item>
				</div>
				
				<div>
					
				</div>
				<el-form-item label="单价：" label-width="100px" prop="ordermoerydan">
					<el-input v-model="form.ordermoerydan" label-width="100px"></el-input>
				</el-form-item>
				<el-form-item label="总金额：" label-width="100px" prop="famoney">
					<el-input placeholder="0.00" v-model="form.famoney"></el-input>
				</el-form-item>
				<el-form-item label="已发货数量：" label-width="100px" prop="huimshu">
					<el-input placeholder="请输入" v-model="form.huimshu"></el-input>
				</el-form-item>
				<el-form-item label="未发货数量：" label-width="100px" prop="huimzhifu">
					<el-input placeholder="请输入" v-model="form.huimzhifu"></el-input>
				</el-form-item>
				
				<el-form-item label="发货日期:" label-width="100px" prop="date1">
					<!--<el-col :span="11">-->
						<el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width:90%;"></el-date-picker>
					<!--</el-col>-->
				</el-form-item>
				<el-form-item label="运费：" label-width="100px" prop="huimyun">
					<el-input placeholder="请输入" v-model="form.huimyun"></el-input>
				</el-form-item>
				<div>
					<el-form-item label="发货状态:" prop="nametype">
						<el-radio-group v-model="form.nametype" >
							<el-radio label="发货中" name="type"></el-radio>
							<el-radio label="结束" name="type"></el-radio>
						</el-radio-group>
					</el-form-item>
				</div>
		
				
				<el-form-item label="备注:" prop="textarea4">
					<el-input type="textarea" 
						style="width:200%;"
						:autosize="{ minRows: 2, maxRows: 4}" 
						 placeholder="请输入内容"
						  v-model="textarea4">
																			</el-input>
				</el-form-item>
			</el-form>
		</div>
		<script>
			var vm = new Vue({
				el: ".demo-ruleForm",
				data() {
					return {
						form: {
							state1: '',
							state2: '',
							ordermoerydan: '',
							huimshu:'',
							huimzhifu:'',
							huimchuku: '',
							huimdan: '',
							nametype:''
						},
						//验证规则
						rules:{
							//数据源
							state1:[
							    {required: true, message: '请输入产品名称', trigger: 'blur'}
							],
							state2:[
							{ required: true, message: '请选择订单', trigger: 'change' }
							],
							ordermoerydan:[
							{ required: true, message: '请输入单价', trigger: 'change' }
							],
							huimshu:[
							{ required: true, message: '请输入产品数量', trigger: 'change' }
							]
						}
					};
				},
				methods: {
					onSubmit(form) {
				/*	console.log(famoney);*/
	    	//验证方法
	        this.$refs[form].validate((valid) => {
	          if (valid) {
	        	  //post提交数据
	           	axios.post("/form",
	           			//参数转换
	           			Qs.stringify(this.form,{arrayFormat: 'brackets'})
	           		//	params:
	           			//ajax请求成功的回调函数
	           			).then(function(v){
	           			console.log("回调成功，获取了服务器端返回的值v");
	           			console.log(v);
	           	}).catch(function(){
	           		alert("出错了");
	           	});
	        	  
	        	  
	          } else {
	            console.log('error submit!!');
	            return false;
	          }
	        });
	      
					}
				}
			});
		</script>

	</body>

</html>